<template>
  <div class="forgot-page">
    <div class="page-header">
      <div class="logo" @click="goHome">
        <span class="name">{{ name }}</span>
      </div>
    </div>
    <div class="container">
      <div class="main">
        <div class="title">忘记密码</div>
        <div class="form">
          <el-form ref="formInline" :model="formData">
            <el-form-item prop="number" class="wrap mb25">
              <el-input type="text" v-model="formData.number" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="captcha" class="mb25 wrap">
              <div class="captcha">
                <div class="captcha-left"><el-input type="password" v-model="formData.captcha"
                    placeholder="请输入验证码"></el-input></div>
                <el-button type="primary" class="ml10">发送验证码</el-button>
              </div>
            </el-form-item>
            <el-form-item prop="password" class="mb25 wrap">
              <el-input type="password" v-model="formData.password" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item prop="checkKey" class="mb25 wrap">
              <el-input type="password" v-model="formData.checkKey" placeholder="请再次输入新密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="form-button">提交</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" link class="go-button mt20" @click="goHome">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Forgot',
  data () {
    return {
      formData: {
      },
      name: 1111
    }
  },
  created () {
  },
  mounted () {
    // this.init()
  },
  methods: {
    goHome () {
      this.$router.replace({ name: 'Login' })
      // router.replace({ path: "/login" });
    }
  }
}
</script>
<style lang="scss">
.forgot-page {
  background: #F6F6F9;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    background-color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    .logo {
      min-width: 200px;
      text-align: center;
      line-height: 60px;
      height: 60px;
      position: relative;
      cursor: pointer;

      .name {
        font-size: 32px;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }

  .container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .main {
      width: 900px;

      .title {
        height: 60px;
        background: #3967CD;
        border-radius: 10px 10px 0 0;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 60px;
        text-align: center;
      }

      .form {
        background: #FFFFFF;
        border-radius: 0 0 10px 10px;
        padding: 50px 20px;
        display: flex;
        justify-content: center;

        .el-form {
          width: 400px;
        }

        .form-button {
          width: 100%;
        }

        .captcha {
          width: 100%;
          display: flex;

          .captcha-left {
            flex: 1;
          }
        }

        .go-button {
          width: 100%;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
